/*
 * @Author: NaturalHulk 2066634567@qq.com
 * @Date: 2024-02-21 15:40:44
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2024-02-21 16:35:11
 * @FilePath: /umi_demo/src/components/xh-components/xh-select-form/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from "react";
import { Form, Input, Radio, DatePicker, Popconfirm, Select, Button } from "antd";
import "./index.less";
import dayjs from "dayjs";
const { RangePicker } = DatePicker;
const XHselectFormPage = (props) => {
  const { list, selectSubmit } = props;

  // 表单数据
  const [formValue] = Form.useForm();
  const style = {
    background: "#0092ff",
    padding: "8px 0",
  };

  // 触发事件返回上级查询信息
  const selectQuery = (e) => {
    if (e.keyCode == 13) {
      exportData(formValue.getFieldsValue());
    }
  };

  // 判断筛选
  const getNode = () => {
    return list.map((t, ind) => {
      if (t.type == "输入框") {
        return (
          <Form.Item label={t.label} name={t.model} key={ind} style={{ marginBottom: "10px" }}>
            <Input allowClear placeholder={`请输入${t.label}`} onKeyDown={(e) => selectQuery(e)} />
          </Form.Item>
        );
      } else if (t.type == "单选框") {
        return (
          <Form.Item label={t.label} name={t.model} key={ind} style={{ marginBottom: "10px" }}>
            <Radio.Group>
              <Radio value={"1"}>是</Radio>
              <Radio value={"2"}>否</Radio>
            </Radio.Group>
          </Form.Item>
        );
      } else if (t.type == "时间日期") {
        return (
          <Form.Item name="time" label={t.label} key={ind} style={{ marginBottom: "10px" }}>
            <RangePicker format="YYYY/MM/DD" allowClear placeholder={`请选择${t.label}`} />
          </Form.Item>
        );
      } else if (t.type == "单选下拉") {
        return (
          <Form.Item label={t.label} name={t.model} key={ind} style={{ marginBottom: "10px" }}>
            <Select
              showSearch
              allowClear
              placeholder={`请选择${t.label}`}
              options={t.opt || []}
              onKeyDown={(e) => selectQuery(e)}
            />
          </Form.Item>
        );
      }
    });
  };

  //查询
  const submits = () => {
    exportData(formValue.getFieldsValue());
  };

  //重置
  const selectResets = async () => {
    await formValue.resetFields();
    submits();
  };

  // 返回上级文件
  const exportData = (obj) => {
    console.log(obj);
    selectSubmit({
      ...obj,
      createTime: obj.time ? dayjs(obj.time[0]).format("YYYY-MM-DD") + " 00:00:00" : "",
      endTime: obj.time ? dayjs(obj.time[1]).format("YYYY-MM-DD") + " 23:59:59" : "",
    });
  };
  return (
    <div className="app-container formBox">
      <Form
        form={formValue}
        layout="inline"
        initialValues={{
          remember: true,
        }}
        autoComplete="off"
      >
        {getNode()}
      </Form>
      <div className="btnClass">
        <Button type="primary" onClick={submits} style={{ margin: "0 5px" }}>
          查询
        </Button>
        <Button onClick={selectResets}>重置</Button>
      </div>
    </div>
  );
};
export default XHselectFormPage;
